<template>
	<view class="order">
		<u-toast ref="uToast" />
		<view class="order-top">
			我的订单
			<img @click="back" src="@/static/img/common_btn_return_n.png" style='width: 10px;height: 19px;' alt="">
		</view>
		<view class="order-model">
			<view class="order-model-box">
				<view :class="['order-model-box-item',{'model-active':is_doing_show==1}]" @click="change_show(1)">进行中</view>
				<view :class="['order-model-box-item',{'model-active':is_doing_show==2 || is_doing_show==3}]" @click="change_show(2)">全部订单</view>
			</view>
		</view>
		<hr v-if="is_doing_show == 1">
		<view class="doing" v-if="is_doing_show == 1">
			<view class="order-info">
				<span>订单信息</span>
				<view class="order-info-list">
					<view class="order-info-item">
						<label>车牌号码：</label><span>浙C33030</span>
					</view>
					<view class="order-info-item">
						<label>换点人：</label><span>张三</span>
					</view>
					<view class="order-info-item">
						<label>剩余公里数：</label><span>10km</span>
					</view>
					<view class="order-info-item">
						<label>订单时间：</label><span>2020-12-12 32:32:32</span>
					</view>
				</view>
			</view>
			<hr>
			<view class="order-info">
				<span>订单流程</span>
				<view class='order-timeline'>
					<u-time-line>
						
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">这是第一条</view>
									<view class="u-order-time">2019-12-06 22:30</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">这是第一条</view>
									<view class="u-order-time">2019-12-06 22:30</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">这是第一条</view>
									<view class="u-order-time">2019-12-06 22:30</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">这是第一条</view>
									<view class="u-order-time">2019-12-06 22:30</view>
								</view>
							</template>
						</u-time-line-item>
						<u-time-line-item>
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">这是第一条</view>
									<view class="u-order-time">2019-12-06 22:30</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</view>

			</view>
		</view>
		<view class="done" v-if="is_doing_show == 2">
			<view class="done-item" v-for="item in list" @click="show_detail(item)">
				<span>{{item.stationName}}</span>
				<view class="done-item-2">{{item.typeText}}</view>
				<view class="done-item-3">{{item.createTime}}</view>
			</view>
			<view v-if="list != ''" @click='getMore'>
				<u-loadmore :status="status"  style="padding-bottom: 20px;" />
			</view>
		</view>
		<view class="detail" v-if="is_doing_show == 3">
			
			<view class="order-current">
				<view><span>车牌号</span>{{info.licensePlateNumber}}</view>
				<hr>
				<view><span>换电站</span>{{info.stationName}}</view>
				<hr>
				<view><span>订单状态</span>{{info.typeText}}</view>
				<hr>
				<view><span style="font-weight: bold;color: #35374B;">换电前</span></view>
				<view><span>总公里数</span>{{info.preSwitchTotalMileage}}KM</view>
				<hr>
				<view><span>剩余公里数</span>{{info.preSwitchRemainingMileage}}KM</view>
				<hr>
				<view><span style="font-weight: bold;color: #35374B;">换电后</span></view>
				<view><span>换电公里数</span>{{info.switchMileage}}KM</view>
				<hr>
				<view><span>剩余公里数</span>{{info.afterSwitchRemainingMileage}}KM</view>
			</view>
			<view class="order-add" v-if="info.status == 1">付款</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	
	let _this;
	export default {
		data() {
			return {
				 status: 'loadmore',
				is_list_all: false,
				limit: 10,
				page: 1,
				total: 1,
				list: [],
				info:{},
				is_doing_show: 1,
				activities: [{
					content: '支持自定义颜色',
					timestamp: '2018-04-03 20:46',
					color: '#1869e0',
					is_top: true
				}]
			};
		},
		computed: mapState(['hasLogin', 'userName', 'token']),
		created() {
			_this = this;
		},
		methods: {
			getMore(){
				if(_this.page == Math.floor(_this.total/_this.limit)+1){
					_this.$refs.uToast.show({
						title: '没有更多数据',
						duration: 2000,
						position: 'bottom',
					})
				}else{
					_this.page ++;
					_this.get_list();
				}
			},
			back() {
				if (this.is_doing_show == 3) {
					this.is_doing_show = 2;
				} else {
					uni.navigateBack({
						delta:1
					})
				}

			},
			show_detail(item) {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'order/order/myBillInfo/' + item.id, )
					.then(function(res) {
						if (res != '') {
							console.log(res);
							self.info = res.data;
						}

					});
				this.is_doing_show = 3;

			},
			change_show(flag) {
				this.is_doing_show = flag;
				if (flag == 1) {
					
				} else {
					this.list = [];
					this.get_list();
				}
			},
			get_list() {
				uni.request({
					url: this.$store.state.ip + 'order/order/myFindPage', //仅为示例，并非真实接口地址。
					data: {
						"page": {
							"size": _this.limit,
							"current": _this.page,
							"orders": [{
								"column": "createTime",
								"asc": false
							}]
						},
						"params": {
							"type": "0"
						}
					},
					method: 'post',
					header: {
						'Authorization': 'Bearer ' + this.token,
					},
					success: (res) => {
						if (res.data.code == 200) {
							
							_this.list = _this.list.concat(res.data.data.records);;
							_this.total = res.data.data.total;
							_this.page = res.data.data.current;
						} else if (res.data.code == '040081') {
				
							_this.$refs.uToast.show({
								title: '登录过期，请重新登录',
								url: '/pages/login/login',
								duration: 2000,
								position: 'bottom',
								params: {
									id: 1,
									menu: 3
								}
							})
				
							console.log(res);
						}
				
				
					},
					fail: (res) => {
						console.log(res);
					}
				});
			}
		}
	};
</script>

<style>
	.order-add {
		margin: 8px 12px;
		text-align: center;
		color: #1869E0;
		border: 1px solid #1869E0;
		border-radius: 24px;
		padding: 10px;
	}
	.order{
		width: 100%;
	}
	.order-add:hover {
		background-color: #1869E0;
		color: #fff;
	}
	.order .done{
		overflow: auto;
	}
	.order-current {
		padding: 0 16px;
		border-radius: 4px;
		background-color: #fff;
	}
	
	.order-current input {
		height: 38px;
		width: 80px;
		border: none;
	}
	
	.order-current view {
		height: 40px;
		line-height: 40px;
	}
	
	.order-current view {
		font-size: 15px;
		color: #35374B;
	}
	
	.order-current hr {
		height: 1px;
	
	}
	
	.order-current view span {
		display: inline-block;
		padding-left: 5px;
		width: 120px;
		font-size: 15px;
		color: #949799;
	}
	
	.order-current-title img {
		float: left;
		margin-right: 6px;
		font-size: 15px;
	}
	.order {
		position: relative;
		height: 100%;
		overflow: auto;
		background-color: #F2F4F7;
	}

	.order-top img {
		position: absolute;
		left: 0px;
		top: 26px;
		padding: 12px;
	}

	.order-top img:active {
		background-color: #eee;
	}

	.order-top {
		background-color: #fff;
		font-size: 16px;
		color: #35374b;
		text-align: center;
		height: 80px;
		line-height: 100px;
	}

	.order-model {
		height: 50px;
		border-top: 1px solid #DEDFE2;
		clear: left;
		background-color: #fff;
	}

	.order-model-box {
		height: 34px;
		margin: 8px 12px;
		background-color: #f0f1f5;
		border-radius: 40px;
	}

	.order-model-box-item {
		float: left;
		width: 50%;
		border-radius: 40px;
		height: 34px;
		color: #a5a6ad;
		font-size: 15px;
		text-align: center;
		line-height: 34px;
	}

	.model-active {
		background-color: #1869e0;
		color: #fff;
	}

	hr {
		height: 6px;
		background-color: #f2f4f7;
		border: none;
	}

	.order-info {
		padding: 19px 12px;
		background-color: #fff;
	}

	.order-info>span {
		color: #242533;
		font-size: 16px;
	}

	.order-info-list {
		margin-top: 20px;
		padding: 0px 27px;
	}

	.order-info-item {
		height: 30px;
		line-height: 30px;
	}

	.order-info-item label {
		display: inline-block;
		color: #949799;
		font-size: 14px;
		width: 140px;
	}

	.order-info-item>span {
		color: #636566;
		font-size: 14px;
	}

	.order-timeline {
		margin: 10px 35px;
		font-size: 14px;
		color: #949799;
		
	}

	.order-timeline span {
		color: #a5a6ad;
	}
	.order .detail {
		overflow: auto;
		padding: 10px 12px;
		box-sizing: border-box;
	}

	.is_top {
		color: #1869E0 !important;
	}

	.done-item {
		margin: 10px 12px;
		padding: 18px;
		border-radius: 4px;
		background-color: #fff;
		color: #35374B;
	}

	.done-item-2 {
		float: right;
		color: #f63333;
		font-size: 18px;
	}

	.done-item-3 {
		color: #A5A6AD;
		font-size: 13px;
		margin-top: 18px;
	}
</style>
